<template>
  <div>
    <van-swipe-cell v-for="(v, i) in list" :key="v.id">
      <van-cell :icon="v.avatar" :title="v.message" :label="v.datetime"></van-cell>
      <template #right>
        <van-button type="danger" @click="deleteList(i)">删除</van-button>
      </template>
    </van-swipe-cell>


    <!-- <van-button type="primary">主要按钮</van-button>
    <van-button type="success">成功按钮</van-button>
    <van-button type="default">默认按钮</van-button>
    <van-button type="warning">警告按钮</van-button>
    <van-button type="danger">危险按钮</van-button> -->

    <!-- <h2>{{ message }}</h2>
    <h1>{{ countA }}------{{ doubleCountA }}</h1>
    <h1>{{ countA }}------{{ doubleCountA }}</h1>
    <h1>{{ countA }}------{{ doubleCountA }}</h1>
    <hr>
    <h1>{{ countA }}------{{ countA10() }}</h1>
    <h1>{{ countA }}------{{ countA10() }}</h1>
    <h1>{{ countA }}------{{ countA10() }}</h1>


    <h3>{{  countA + countB  }}</h3>

    <button @click="addCountA">countA++</button> -->
  </div>
</template>


<script>
import Mock from 'mockjs';

const data = Mock.mock({
  "list|10": [{
    "avatar": "@image(50x50, @color)",
    "message": "@cword(10, 20)",
    "datetime": "@datetime",
    "id": "@id"
  }]
})
console.log(data)
export default {
  // 数据
  data() {
    return {
      message: 'hello  Vue3',
      countA: 1,
      countB: 2,
      list: data.list
    }
  },
  // 方法
  methods: {
    addCountA() {
      this.countA++
    },
    countA10() {
      // console.log('countA10 函数执行了！！')
      return this.countA * 10
    },
    deleteList(i) {
      this.list.splice(i, 1)
    }
  },
  // 侦听
  // watch: {
  //   countA: {
  //     handler(newValue, oldValue) {
  //       // console.log(`countA  从旧值${oldValue}变化为新值${newValue}`)
  //     },
  //     // 立即执行
  //     immediate: true,
  //     // 深度监听
  //     deep: true,
  //   }
  // },
  // // 计算属性
  // computed: {
  //   doubleCountA: {
  //     get() {
  //       // console.log('doubleCountA 执行了')
  //       return this.countA * 10
  //     }
  //   }
  // },
  // 生命周期

  beforeCreate() {
    // 实例创建前
    console.log(this)
  },
  created() {
    // 实例创建 可以访问 this data computed
    console.log(this)
  },

  beforeMount() { },
  mounted() {
    // 组件挂载完毕  可以访问 dom
  },

  beforeUpdate() { },
  updated() {
    // 数据更新
  },


  beforeUnmount() { },
  unmounted() {
    // 组件销毁
  }
}
</script>


<style lang="scss"></style>